<template>
    <div class="search-bar-container">
        <van-row>
            <van-col span="17">
                <van-search v-model="searchValue" placeholder="请输入搜索内容" show-action @blur="onUpdate" @search="onSearch">
                    <template #action>
                        <van-button style="margin-bottom: 10px;" type="primary" size="mini" @click="confirmSearch">确认</van-button>
                    </template>
                </van-search>
            </van-col>
            <van-col span="7">
                <van-cell is-link style="font-size: 12px; margin-top: 8px;" title="排序方式" @click="show = true" />
                <van-action-sheet  v-model:show="show" :actions="actions" @select="onSelect" position="center"  />
            </van-col>
        </van-row>
    </div>
</template>

<script setup lang="ts">
import { ref,defineEmits } from 'vue';
import { showToast } from 'vant';

const emits = defineEmits(['search', 'choseSortManner']);
// 定义用于绑定搜索框输入值的响应式数据
const searchValue = ref('');

// 排序方式
const show = ref(false);
const actions = [
    { name: '按照    时间排序', icon: 'star-o' },
    { name: '按照  重要性排序', icon: 'star-o' },
    { name: '按照复习时间排序', icon: 'star-o' },
    { name: '按照单词数量排序', icon: 'star-o' },
];

const onSelect = (item:any) => {
    show.value = false;
    emits('choseSortManner', item.name);
    showToast(item.name);
}


// 搜索框搜索时触发的方法（回车搜索时触发）
const onSearch = () => {
    emits('search', searchValue.value);
};

// 确认按钮点击时触发的方法
const confirmSearch = () => {
    emits('search', searchValue.value);
};

const onUpdate = () => {
    emits("search", searchValue.value);
}

</script>

<style scoped>
.search-bar-container {
    padding: 10px;
}
</style>